var uiu = document.querySelector(".two2")
var soo = document.querySelector(".soo")
var xs = document.querySelector("#xs")
var lol = document.querySelector("#lol")
var pop = document.querySelector(".pop")
var opo = document.querySelector(".opo")
var lkl = document.querySelector("#lkl")
var jk = document.querySelector(".jk")
uiu.onclick = function() {
	soo.style.display = "block"
}
xs.onclick = function() {
	soo.style.display = "none"
}
lol.onclick = function() {
	pop.style.display = "block"
	opo.style.display = "none"
	jk.style.display = "none"
}
// lol.onblur = function() {
// 	pop.style.display = "none"
// 	opo.style.display = "block"
// }
lkl.onclick = function() {
	opo.style.display = "none"
	jk.style.display = "block"
}
lol.onkeydown = function(e) {
	if (e.keyCode === 13) {
		opo.style.display = "none"
		jk.style.display = "block"
		pop.style.display = "none"
	}
}
var tyt = document.querySelectorAll(".tyt")
for (var q = 0; q < tyt.length; q++) {
	tyt[q].onclick = function() {
		var lol = document.querySelector("#lol")
		lol.value = this.innerHTML
		pop.style.display = "none"
		opo.style.display = "block"
	}

}
var acts = document.querySelector("#act")
var boxEr = document.querySelector(".box-er")
acts.onmouseover = function() {
	boxEr.setAttribute("style", "display:block;")
}
acts.onmouseleave = function() {
	boxEr.setAttribute("style", "display:none;")
}
var zifubao = document.querySelector("#zifubao")
var huabeifen = document.querySelector("#huabeifen")
var huabei = document.querySelector("#huabei")
var wx = document.querySelector("#wx")
var fenqi = document.querySelector("#fenqi")
var qi3 = document.querySelector("#qi3")
var qi6 = document.querySelector("#qi6")
var qi12 = document.querySelector("#qi12")
var qi24 = document.querySelector("#qi24")
var text = document.querySelector("#text")
var mianx1 = document.querySelector("#mianx1")
var mianx2 = document.querySelector("#mianx2")
var mianx3 = document.querySelector("#mianx3")
var mianx4 = document.querySelector("#mianx4")
zifubao.onclick = function() {
	zifubao.style.color = "red"
	zifubao.style.border = "1px solid red"
	huabeifen.style.color = "rgba(0,0,0,0.5)"
	huabeifen.style.border = "1px solid rgba(0,0,0,0.5)"
	huabei.style.color = "rgba(0,0,0,0.5)"
	huabei.style.border = "1px solid rgba(0,0,0,0.5)"
	wx.style.color = "rgba(0,0,0,0.5)"
	wx.style.border = "1px solid rgba(0,0,0,0.5)"
	text.innerHTML = "支付宝"
	fenqi.classList.add("hide")
}
huabeifen.onclick = function() {
	huabeifen.style.color = "red"
	huabeifen.style.border = "1px solid red"
	zifubao.style.color = "rgba(0,0,0,0.5)"
	zifubao.style.border = "1px solid rgba(0,0,0,0.5)"
	huabei.style.color = "rgba(0,0,0,0.5)"
	huabei.style.border = "1px solid rgba(0,0,0,0.5)"
	wx.style.color = "rgba(0,0,0,0.5)"
	wx.style.border = "1px solid rgba(0,0,0,0.5)"
	text.innerHTML = "花呗分期"
	fenqi.classList.remove("hide")
}
huabei.onclick = function() {
	huabei.style.color = "red"
	huabei.style.border = "1px solid red"
	zifubao.style.color = "rgba(0,0,0,0.5)"
	zifubao.style.border = "1px solid rgba(0,0,0,0.5)"
	huabeifen.style.color = "rgba(0,0,0,0.5)"
	huabeifen.style.border = "1px solid rgba(0,0,0,0.5)"
	wx.style.color = "rgba(0,0,0,0.5)"
	wx.style.border = "1px solid rgba(0,0,0,0.5)"
	text.innerHTML = "花呗"
	fenqi.classList.add("hide")
}
wx.onclick = function() {
	wx.style.color = "red"
	wx.style.border = "1px solid red"
	zifubao.style.color = "rgba(0,0,0,0.5)"
	zifubao.style.border = "1px solid rgba(0,0,0,0.5)"
	huabei.style.color = "rgba(0,0,0,0.5)"
	huabei.style.border = "1px solid rgba(0,0,0,0.5)"
	huabeifen.style.color = "rgba(0,0,0,0.5)"
	huabeifen.style.border = "1px solid rgba(0,0,0,0.5)"
	text.innerHTML = "微信支付"
	fenqi.classList.add("hide")
}
qi3.onclick = function() {
	qi3.style.color = "red"
	qi3.style.border = "1px solid red"
	qi3.style.backgroundColor = "#fef5f5"
	qi6.style.color = "rgba(0,0,0,0.5)"
	qi6.style.border = "1px solid rgba(0,0,0,0.5)"
	qi6.style.backgroundColor = ""
	qi12.style.color = "rgba(0,0,0,0.5)"
	qi12.style.border = "1px solid rgba(0,0,0,0.5)"
	qi12.style.backgroundColor = ""
	qi24.style.color = "rgba(0,0,0,0.5)"
	qi24.style.border = "1px solid rgba(0,0,0,0.5)"
	qi24.style.backgroundColor = ""
	mianx1.style.color = "#fff"
	mianx1.style.backgroundColor = "#f34141"
	mianx1.style.border = "1px solid #f34141"
	mianx2.style.color = "#f34141"
	mianx2.style.backgroundColor = "#ffe9e9"
	mianx2.style.border = "#ffe9e9"
	mianx3.style.color = "#f34141"
	mianx3.style.backgroundColor = "#ffe9e9"
	mianx3.style.border = "#ffe9e9"
	mianx4.style.color = "#f34141"
	mianx4.style.backgroundColor = "#ffe9e9"
	mianx4.style.border = "#ffe9e9"
}
qi6.onclick = function() {
	qi6.style.color = "red"
	qi6.style.border = "1px solid red"
	qi6.style.backgroundColor = "#fef5f5"
	qi3.style.color = "rgba(0,0,0,0.5)"
	qi3.style.border = "1px solid rgba(0,0,0,0.5)"
	qi3.style.backgroundColor = ""
	qi12.style.color = "rgba(0,0,0,0.5)"
	qi12.style.border = "1px solid rgba(0,0,0,0.5)"
	qi12.style.backgroundColor = ""
	qi24.style.color = "rgba(0,0,0,0.5)"
	qi24.style.border = "1px solid rgba(0,0,0,0.5)"
	qi24.style.backgroundColor = ""
	mianx2.style.color = "#fff"
	mianx2.style.backgroundColor = "#f34141"
	mianx2.style.border = "1px solid #f34141"
	mianx1.style.color = "#f34141"
	mianx1.style.backgroundColor = "#ffe9e9"
	mianx1.style.border = "#ffe9e9"
	mianx3.style.color = "#f34141"
	mianx3.style.backgroundColor = "#ffe9e9"
	mianx3.style.border = "#ffe9e9"
	mianx4.style.color = "#f34141"
	mianx4.style.backgroundColor = "#ffe9e9"
	mianx4.style.border = "#ffe9e9"
}

qi12.onclick = function() {
	qi12.style.color = "red"
	qi12.style.border = "1px solid red"
	qi12.style.backgroundColor = "#fef5f5"
	qi6.style.color = "rgba(0,0,0,0.5)"
	qi6.style.border = "1px solid rgba(0,0,0,0.5)"
	qi6.style.backgroundColor = ""
	qi3.style.color = "rgba(0,0,0,0.5)"
	qi3.style.border = "1px solid rgba(0,0,0,0.5)"
	qi3.style.backgroundColor = ""
	qi24.style.color = "rgba(0,0,0,0.5)"
	qi24.style.border = "1px solid rgba(0,0,0,0.5)"
	qi24.style.backgroundColor = ""
	mianx3.style.color = "#fff"
	mianx3.style.backgroundColor = "#f34141"
	mianx3.style.border = "1px solid #f34141"
	mianx2.style.color = "#f34141"
	mianx2.style.backgroundColor = "#ffe9e9"
	mianx2.style.border = "#ffe9e9"
	mianx1.style.color = "#f34141"
	mianx1.style.backgroundColor = "#ffe9e9"
	mianx1.style.border = "#ffe9e9"
	mianx4.style.color = "#f34141"
	mianx4.style.backgroundColor = "#ffe9e9"
	mianx4.style.border = "#ffe9e9"
}
qi24.onclick = function() {
	qi24.style.color = "red"
	qi24.style.border = "1px solid red"
	qi24.style.backgroundColor = "#fef5f5"
	qi6.style.color = "rgba(0,0,0,0.5)"
	qi6.style.border = "1px solid rgba(0,0,0,0.5)"
	qi6.style.backgroundColor = ""
	qi12.style.color = "rgba(0,0,0,0.5)"
	qi12.style.border = "1px solid rgba(0,0,0,0.5)"
	qi12.style.backgroundColor = ""
	qi3.style.color = "rgba(0,0,0,0.5)"
	qi3.style.border = "1px solid rgba(0,0,0,0.5)"
	qi3.style.backgroundColor = ""
	mianx4.style.color = "#fff"
	mianx4.style.backgroundColor = "#f34141"
	mianx4.style.border = "1px solid #f34141"
	mianx2.style.color = "#f34141"
	mianx2.style.backgroundColor = "#ffe9e9"
	mianx2.style.border = "#ffe9e9"
	mianx3.style.color = "#f34141"
	mianx3.style.backgroundColor = "#ffe9e9"
	mianx3.style.border = "#ffe9e9"
	mianx1.style.color = "#f34141"
	mianx1.style.backgroundColor = "#ffe9e9"
	mianx1.style.border = "#ffe9e9"
}

window.onload = function() {
	var daojisi = document.querySelector("#daojisi")
	var time = 1800;
	setInterval(function() {
		time = time - 1;
		var minute = parseInt(time / 60);
		var second = parseInt(time % 60);
		daojisi.innerHTML = minute + "分" + second + "秒";
	}, 1000)
}
